<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>Ads Demo</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />

    <style>
      h4 {
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
      }
      p {
        line-height: 18px;
        display: block;
        line-height: 16px;
        /* margin: 10px; */
        margin-block-start: 0.4em;
        margin-block-end: 0.4em;
      }
    </style>
  </head>

  <body class="text-base">
    <div id="options" class="container p-3" style="margin: 0 auto">
      <h3 class="text-lg font-semibold text-indigo-500">IMA 参数</h3>
      <div class="flex flex-wrap">
        <label id="ima-preset-url" class="mr-3 mb-2 p-1 bg-gray-200">
          <select>
            <option value="">请选择预设 IMA TagURL</option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single Inline Linear
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single Skippable Inline
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dredirectlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single Redirect Linear
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dredirecterror&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single Redirect Error
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dredirecterror&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&nofb=1&correlator="
            >
              Single Redirect Broken (Fallback)
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinearvpaid2js&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single VPAID 2.0 Linear
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dnonlinearvpaid2js&ciu_szs=728x90%2C300x250&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single VPAID 2.0 Non-Linear
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/nonlinear_ad_samples&sz=480x70&cust_params=sample_ct%3Dnonlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              Single Non-linear Inline
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sar%3Da0f2&ciu_szs=300x250&ad_rule=1&gdfp_req=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              VMAP Session Ad Rule Pre-roll
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonly&ciu_szs=300x250%2C728x90&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              VMAP Pre-roll
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpreonlybumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              VMAP Pre-roll + Bumper
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpostonly&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              VMAP Post-roll
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpost&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
            >
              VMAP Pre-, Mid-, and Post-rolls, Single Ads
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
            >
              VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll
              Single Ad
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
            >
              VMAP - Pre-roll Single Ad, Mid-roll Optimized Pod with 3 Ads, Post-roll
              Single Ad
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
            >
              VMAP - Pre-roll Single Ad, Mid-roll Optimized Pod with 3 Ads, Post-roll
              Single Ad (bumpers around all ad breaks)
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostlongpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
            >
              VMAP - Pre-roll Single Ad, Mid-roll Standard Pods with 5 Ads Every 10
              Seconds, Post-roll Single Ad
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/simid&description_url=https%3A%2F%2Fdevelopers.google.com%2Finteractive-media-ads&sz=640x480&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
            >
              SIMID Survey Pre-roll
            </option>
            <option
              value="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/omid_ad_samples&env=vp&gdfp_req=1&output=vast&sz=640x480&description_url=http%3A%2F%2Ftest_site.com%2Fhomepage&vpmute=0&vpa=0&vad_format=linear&url=http%3A%2F%2Ftest_site.com&vpos=preroll&unviewed_position_start=1&correlator="
            >
              OM SDK Sample Pre-roll
            </option>
          </select>

          <div class="mt-1 mb-1">
            <a
              class="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
              href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags"
              target="_blank"
              >IMA sample tag url</a
            >
            : <input style="width: 500px" />
          </div>
        </label>

        <label
          id="ima-ads-request"
          class="mr-3 mb-2 p-1 bg-gray-200"
          title="优先使用AdsRequest"
        >
          AdsRequest: <input type="checkbox" /> <br />
        </label>

        <label id="ima-ads-response" class="mr-3 mb-2 p-1 bg-gray-200">
          TagURL 请求后转为 AdsResponse <input type="checkbox" /> <br />
          AdsResponse: <textarea style="width: 500px" placeholder="手动填入AdsResponse内容"></textarea>
        </label>
        <label id="autoplay" class="mr-3 mb-2 p-1 bg-gray-200">
          autoplay<input type="checkbox" checked="true" />
        </label>
        <label id="showControls" class="mr-3 mb-2 p-1 bg-gray-200">
          controls<input type="checkbox" checked="true" />
        </label>
        <label id="reset-player" class="mr-3 mb-2 p-1 bg-gray-200">
          重置播放器<input type="checkbox" checked="true" />
        </label>
      </div>
      <div class="flex flex-wrap">
        <button id="reset-opt" class="py-1 px-2 bg-green-500 text-white shadow-md mr-2">
          重置参数
        </button>
        <button id="apply-opt" class="py-1 px-2 bg-green-500 text-white shadow-md">
          更新参数
        </button>
      </div>
    </div>

    <div id="video" style="margin: 0 auto"></div>

    <!-- <script src="../../packages/xgplayer/dist/index.min.js"></script>
    <script src="../../packages/xgplayer-ads/dist/index.min.js"></script>
    <script>  
      console.log(AdPlugin)
    </script> -->
    <script type="module" defer src="./index.js"></script>
  </body>
</html>
